<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*鼠标放上小手标志*/
        font {
            cursor: pointer;
        }

        button {
            cursor: pointer;
        }
    </style>
</head>
<body>

<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container" style="float: right;margin-right: -70px;">
        <button class="layui-btn layui-btn-sm" id="deleteUserByIds">批量删除</button>
        <button class="layui-btn layui-btn-sm" onclick="add()">添加用户</button>
    </div>
</script>
<div class="demoTable" style="position: absolute;z-index: 1000 ;margin-top: 5px;" >
    注册时间:
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="userCreateTime" autocomplete="off" placeholder="开始时间">
    </div>
    至
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="userFinishTime" autocomplete="off" placeholder="结束时间">
    </div>
    <div class="layui-inline">
        <input class="layui-input" name="demoReload" id="demoReload" autocomplete="off" placeholder="账号/姓名/手机号">
    </div>
    <button class="layui-btn" data-type="reload" id="reload">查询</button>

</div>
<table class="layui-hide" id="test" lay-filter="test"></table>




<!-- 操作指令 -->
<script type="text/html" id="barDemo">
    <a lay-event="edit">
        <font color="#0000FF">编辑</font>
    </a>
    <a>|</a>
    <a lay-event="allot">
        <font color="#0000FF">分配角色</font>
    </a>
    <a>|</a>
    <a lay-event="reset">
        <font color="#0000FF">重置密码</font>
    </a>
    <a>|</a>
    <a lay-event="del">
        <font color="red">删除</font>
    </a>
</script>


<script src="../static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        table.render({
            elem: '#test',
            url: '/selUserList',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['exports'],
            title: '用户数据表',
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'zizeng',
                    width: 110,
                    title: '序号',
                    templet: '#zizeng'
                }, {
                    field: 'userId',
                    title: 'ID',
                    hide: true
                }, {
                    field: 'userUsername',
                    title: '账号',
                    width: 150
                }, {
                    field: 'userRolename',
                    title: '姓名',
                    width: 150
                }, {
                    field: 'userPhone',
                    title: '电话',
                    width: 209
                }, {
                    field: 'userCreateTime',
                    title: '创建时间',
                    width: 210,
                    sort: true
                }, {
                    field: 'userState',
                    title: '状态',
                    width: 150,
                    templet: function (object) {
                        if (object.userState == 0) {
                            return '<a href="#"><font color="#0000FF">激活</font></a>'
                        } else if (object.userState == 1) {
                            return '<a href="#"><font color="#0000FF">关闭</font></a>'
                        }
                    }
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 250
                }]
            ],
            page: true,
            height: 515,
            id: 'testReload',
        });
        // 模糊查询 搜索
        var $ = layui.$, active = {
            reload: function(){
                    var userCreateTime = $('#userCreateTime').val();
                    var userFinishTime = $('#userFinishTime').val();
                    var demoReload = $('#demoReload').val();
                    //执行重载
                    table.reload('testReload',{
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            userCreateTime: userCreateTime, //逗号隔开
                            userFinishTime: userFinishTime,
                            demoReload: demoReload
                        }
                    });
                }
            };
        //提交
        $('.demoTable .layui-btn').on('click', function(){
            // $("#deleteUserByIds").css("display", "none");
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //分页挪到右下角
        // $('.layui-table-page').css('text-align', 'right');
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') { //删除
                var flag = confirm("您确定要删除吗？");
                if (flag) {
                    $.ajax({
                        type: "post",
                        url: '/deleteUserById',
                        dataType: "json",
                        data: {
                            id: data.userId
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("删除成功", {
                                    icon: 6
                                }, function () {
                                    location.reload()
                                    // window.location.href = "/selUser"
                                });
                            } else {
                                layer.alert("删除失败")
                            }
                        }
                    })
                }
            } else if (obj.event === 'reset') {
                var flag = confirm("您确定要重置密码吗？");
                if (flag) {
                    $.ajax({
                        type: "post",
                        url: '/updUserById',
                        dataType: "json",
                        data: {
                            id: data.userId
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("重置密码成功", {
                                    icon: 6
                                }, function () {

                                });
                            } else {
                                layer.alert("重置失败")
                            }
                        }
                    })
                }
            } else if (obj.event === 'allot') {
                $("#boxDivd").css("display", "block");
                $("#userIds").val(data.userId);
            } else if (obj.event === 'edit') { //编辑按钮
                $("#boxDiv").css("display", "block");
                $("#title").html("修改用户信息");
                $("#userId").val(data.userId);
                $("#userUsername").val(data.userUsername);
                $("#userRolename").val(data.userRolename);
                $("#userPassword").val(data.userPassword);
                $("#userPasswords").val(data.userPasswords);
                $("#userBirthday").val(data.userBirthday);
                $("#userSex").val(data.userSex);
                $("#userPhone").val(data.userPhone);
                $("#userEmail").val(data.userEmail);
            }
        });
        //批量删除
        $("#deleteUserByIds").click(function () {
            var checkStatus = table.checkStatus('testReload'),
                data = checkStatus.data,
                file_id = "";

            if (data.length > 0) {
                for (var i in data) {
                    file_id += data[i].userId + ",";
                }
                console.log(file_id);
                layer.confirm('确定删除选中的用户？', {
                    icon: 3,
                    title: '提示信息'
                }, function (index) {
                    $.ajax({
                        url: '/deleteUserByIds',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            ids: file_id
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("删除成功", {
                                    icon: 6
                                }, function () {
                                    location.reload()
                                    // window.location.href = "/selUser"
                                });
                            } else {
                                layer.alert("删除失败")
                            }
                        }

                    })
                })
            } else {
                layer.msg("请选择需要删除的用户");
            }
        });
    });
</script>
<div style="margin-top: -45px">
<!--    <button class="layui-btn layui-btn-sm" id="deleteUserByIds" style="position: absolute;z-index: 1000; display:block;">批量删除</button>-->
<!--    <input type="checkbox"  name="check_all" title="首页权限" lay-skin="primary" lay-filter="checkall"/>-->
</div>
<script>
    //日期范围
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#userCreateTime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#userFinishTime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#userBirthday',
            calendar: true
        });
    });

    //添加操作显示弹窗
    function add() {
        $("#boxDiv").css("display", "block");
        $("#userPassword").css("display", "block");
    }

    //添加和修改提交
    function sub() {
        let userId = document.getElementById("userId").value;
        let userUsername = document.getElementById("userUsername").value;
        let userRolename = document.getElementById("userRolename").value;
        let userPassword = document.getElementById("userPassword").value;
        let userBirthday = document.getElementById("userBirthday").value;
        let userSex = document.getElementById("userSex").value;
        let userPhone = document.getElementById("userPhone").value;
        let userEmail = document.getElementById("userEmail").value;
        if (userId == "") {
            var flag1 = confirm("您确定要添加新的用户吗？");
            if (flag1) {
                $.ajax({
                    url: '/addUser',
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    data: {
                        userUsername: userUsername,
                        userRolename: userRolename,
                        userPassword: userPassword,
                        userBirthday: userBirthday,
                        userSex: userSex,
                        userPhone: userPhone,
                        userEmail: userEmail
                    },
                    success: function (data) {
                        if (data == 200) {
                            alert("添加信息成功")
                            window.location.href = "/selUserList?demoReload=null"
                        } else {
                            alert("添加信息失败")
                        }
                    },
                    error: function () {
                        layer.alert("添加失败", {
                            icon: 7,
                            title: '提示',
                            time: 1000
                        })
                    }
                })
            }
        } else {
            var flag = confirm("您确定要修改您的信息吗？");
            if (flag) {
                $.ajax({
                    url: '/updUser',
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    data: {
                        userId: userId,
                        userUsername: userUsername,
                        userRolename: userRolename,
                        userPassword: userPassword,
                        userBirthday: userBirthday,
                        userSex: userSex,
                        userPhone: userPhone,
                        userEmail: userEmail
                    },
                    success: function (data) {
                        if (data == 200) {
                            alert("修改信息成功")
                            window.location.href = "/selUserList?demoReload=null"
                        } else {
                            alert("修改信息失败")
                        }
                    },
                    error: function () {
                        layer.alert("修改失败", {
                            icon: 7,
                            title: '提示',
                            time: 1000
                        })
                    }
                })
            }
        }

    }

    //配置角色提交
    function sub1() {
        let userRoleid = document.getElementById("userRoleid").value;
        let userIds = document.getElementById("userIds").value;
        var flag;
        if (userRoleid == 2) {
            flag = confirm("您确定要设置该用户为超级管理员吗？");
        } else {
            flag = confirm("您确定要设置该用户为管理员吗？");
        }
        if (flag) {
            $.ajax({
                url: '/updUserByRoleId',
                type: 'post',
                dataType: 'json',
                async: false,
                data: {
                    id: userIds,
                    userRoleid: userRoleid
                },
                success: function (data) {
                    if (data == 200) {
                        alert("设置超级管理员成功");
                        location.reload()
                    } else if (data == 201) {
                        alert("设置管理员成功");
                        location.reload()
                    } else {
                        alert("设置失败");
                        location.reload()
                    }

                },
                error: function () {
                    layer.alert("修改失败", {
                        icon: 7,
                        title: '提示',
                        time: 1000
                    })
                }
            })
        }
    }

    //添加编辑取消
    function cancel() {
        $("#boxDiv").css("display", "none");
    }

    //分配角色取消
    function cancel1() {
        $("#boxDivd").css("display", "none");
    }
</script>
<div style="width: 500px;background-color: whitesmoke; height: 400px; display: none;position: fixed;top:15%; left: 30%"
     id="boxDiv">
    <form>
        <table border="1" bgcolor="whitesmoke" cellspacing="0" align="center" width="260" height="300">
            <h3 align="center" id="title">添加用户信息</h3>
            <tr  style="display:none;">
                <td style="display:none;">&nbsp;&nbsp;&nbsp;ID</td>
                <td><input type="hidden" id="userId"/></td>
            </tr>
            <tr>
                <td>账&nbsp;&nbsp;&nbsp;&nbsp;号:</td>
                <td><input type="text" name="userUsername" id="userUsername" placeholder="请输入账号"
                           autocomplete="off"/></td>
            </tr>
            <tr>
                <td>姓&nbsp;&nbsp;&nbsp;&nbsp;名:</td>
                <td><input type="text" name="userRolename" id="userRolename" placeholder="请输入姓名"
                           autocomplete="off"/></td>
            </tr>
            <tr>
                <td>密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
                <td><input type="password" name="userPassword" id="userPassword" placeholder="请输入密码"
                           autocomplete="off" style="display: none"/></td>
            </tr>
            <tr>
                <td>生&nbsp;&nbsp;&nbsp;&nbsp;日:</td>
                <td><input type="text" name="userBirthday" id="userBirthday" placeholder="请选择时间"
                           autocomplete="off"/></td>
            </tr>
            <tr>
                <td>性&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
                <td>
                    <select id="userSex">
                        <option selected="selected">请选择</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>电&nbsp;&nbsp;&nbsp;&nbsp;话:</td>
                <td><input type="text" name="userPhone" id="userPhone" placeholder="请输入手机号"
                           autocomplete="off"/></td>
            </tr>
            <tr>
                <td>邮&nbsp;&nbsp;&nbsp;&nbsp;箱:</td>
                <td><input type="text" name="userEmail" id="userEmail" placeholder="请输入邮箱"
                           autocomplete="off"/></td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2" align="center">
                    <button class="button1" onclick="sub()">提交</button>
                    <button class="button2" onclick="cancel()">取消</button>
                </td>
            </tr>
        </table>
    </form>
</div>
<div style="width: 500px;background-color: whitesmoke; height: 400px; display: none;position: fixed;top:15%; left: 30%"
     id="boxDivd">
    <table border="1" bgcolor="whitesmoke" cellspacing="0" align="center" width="260" height="100">
        <h3 align="center" id="titles">分配角色</h3>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;ID</td>
            <td><input type="hidden" id="userIds"/></td>
        </tr>
        <tr>
            <td>请选择角色:</td>
            <td>
                <select id="userRoleid">
                    <option>请选择角色</option>
                    <option value="2">超级管理员</option>
                    <option value="3">管理员</option>
                </select>
            </td>
        </tr>
        <tr>
            <td rowspan="2" colspan="2" align="center">
                <button class="button1" onclick="sub1()">提交</button>
                <button class="button2" onclick="cancel1()">取消</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
